import React, { useEffect, useState } from 'react'
import http from '../../api/http'
import { NavBar, InfiniteScroll } from 'antd-mobile'
import styles from './css/list.module.css'
import dayjs from 'dayjs'
import { useNavigate } from 'react-router-dom'

const List = () => {
    const nav= useNavigate()
    const [list, setList] = useState([])
    const [page, setPage] = useState(1)
    const [hasMore, setHasMore] = useState(true)

    const start = "北京";
    const end = "三亚"
    const date = dayjs().format("YYYY-MM-DD")

    // 请求列表接口
    const getData = async () => {
        const res = await http.post("/api/trip/train", { start, end, page })
        console.log(res.data.data);
        setList([...list, ...res.data.data])
        setPage(page + 1)
        if (res.data.data.length < 0) {
            setHasMore(false)
        }
    }
    useEffect(() => {
        getData()
    }, [])

    // 跳详情
    const getDeail=(v)=>{
      nav("/deail",{state:v})
    }
    return (
        <div>
            <NavBar>{start}—{end}</NavBar>

            {/*渲染列表*/}
            <div className={styles.box}>
                {
                    list.map((v, i) => {
                        return <dl key={i} className={styles.dl} onClick={()=>getDeail(v)}>
                            <dt>{v.start}—{v.end}</dt>
                            <dd>
                                <div>{date}</div>
                                <div>{v.startTime}</div>
                            </dd>
                            <dd>
                                <div>二等座:{v.tick.secondTick}</div>
                                <div>一等座:{v.tick.firstTick}</div>
                                <div>商务座:{v.tick.vip}</div>
                            </dd>
                        </dl>
                    })
                }
            </div>
            <InfiniteScroll loadMore={getData} hasMore={hasMore} />
        </div>
    )
}

export default List
